<template>
  <el-dialog class="edit-box" :title="dialog.title" :visible.sync="dialog.visible" append-to-body top="5vh">
    <el-form class="editInfo" ref="editInfo" :model="editInfo.data" :rules="editInfo.rules" size="small"
             label-width="120px">
      <el-form-item label="部门" prop="deptId">
        <tree-select v-model="editInfo.data.deptId" :options="departmentAllListData" :normalizer="treeSelectProps"
                     placeholder="选择部门"/>
      </el-form-item>
      <el-form-item label="发放月份" prop="salaryDate">
        <el-date-picker
          v-model="editInfo.data.salaryDate"
          type="month"
          value-format="yyyy-MM-dd"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialog.visible = false">取消</el-button>
      <el-button type="primary" @click="handleEditSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { debounce } from 'lodash'
  import TreeSelect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'SalarymakeSelect',
    mixins: [],
    components: {
      TreeSelect
    },
    data() {
      return {
        dialog: {
          status: 'create',
          visible: false, // 是否显示
          title: '制作工资'
        },
        formParams: { // 编辑需要的参数
          deptId: null, // 所属部门
          salaryDate: '' // salaryDate
        },
        editInfo: { // 编辑表单
          id: undefined,
          data: {
            ...this.formParams
          },
          rules: {
            deptId: [
              { required: true, message: '请选择所属部门', trigger: 'change' }
            ],
            salaryDate: [
              { required: true, message: '请选择年月', trigger: 'change' }
            ]
          },
          disabled: false // 处理编辑，某些项禁止编辑
        },
        treeSelectProps(node) {
          return {
            id: node.id,
            label: node.label,
            children: node.children,
            isDefaultExpanded: true
          }
        },
        detailInfo: null
      }
    },
    props: {
      visible: {
        type: [Boolean],
        required: true,
        default: false
      },
      departmentAllListData: {// 搜索参数
        type: Array,
        required: true,
        default() {
          return []
        }
      }
    },
    computed: {},
    methods: {
      handleEditSubmit: debounce(function() { // 编辑，提交，防抖
        this.$refs['editInfo'].validate((valid, object) => {
          if (valid) {
            this.$router.replace({
              name: 'Salarymake',
              query: {
                ...this.editInfo.data,
                ...{
                  type: '1'
                }
              }
            })
          }
        })
      }, 300),
      async resetEditData(data = null) { // 重置编辑表单
        // this.dialog.status = data ? 'update' : 'create'
        // this.dialog.title = data ? '编辑' : '添加'
        // this.dialog.visible = true
        this.editInfo.id = undefined
        this.editInfo.disabled = false
        this.editInfo.data = {
          ...this.formParams
        }
      },
      async initEditDialog(data = null) { // 编辑－显示弹出框
        await this.resetEditData(data)
        this.$nextTick(() => {
          this.$refs['editInfo'].clearValidate()
        })
      }
    },
    watch: {
      visible(newVal, oldVal) {
        if (newVal !== this.dialog.visible) {
          this.dialog.visible = newVal
          if (newVal) {
            this.initEditDialog()
          }
        }
      },
      'dialog.visible'(newVal, oldVal) {
        this.$emit('update:visible', newVal)
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .editInfo {
    margin-right: 120px;

    & /deep/ .el-tabs {
      .el-tabs__content {
        overflow: visible;
      }
    }

    .el-date-editor--month,
    .el-cascader,
    .el-select {
      width: 100%;
    }
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 100px;
    height: 100px;
  }

  .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 98px;
    display: none;
  }

</style>
